@model OrchardCore.Markdown.ViewModels.EditMarkdownFieldViewModel
@using OrchardCore.ContentLocalization
@using OrchardCore.ContentManagement.Metadata.Models
@using OrchardCore.Markdown.Settings;

@{
    var settings = Model.PartFieldDefinition.GetSettings<MarkdownFieldSettings>();
    var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
}

<script name="simplemde" depends-on="admin" asp-src="~/OrchardCore.Markdown/Scripts/simplemde.min.js" at="Foot"></script>
<style name="simplemdecss" asp-src="~/OrchardCore.Markdown/Styles/simplemde.min.css" debug-src="~/OrchardCore.Markdown/Styles/simplemde.css"></style>

<div class="form-group">
    <label asp-for="Markdown">@Model.PartFieldDefinition.DisplayName()</label>
    <textarea asp-for="Markdown" class="form-control content-preview-text"></textarea>
    @if (!String.IsNullOrEmpty(settings.Hint))
    {
        <span class="hint">@settings.Hint</span>
    }
</div>

<script at="Foot">
    $(function () {
        var markdownElement = document.getElementById("@Html.IdFor(m => m.Markdown)");
        // When part rendered by a flow part only the elements scripts are rendered, so the html element will not exist. 
        if (markdownElement) {
            var simplemde = new SimpleMDE({
                element: markdownElement,
                forceSync: true,
                toolbar: simplemdeToolbar,
                autoDownloadFontAwesome: false
            });

            simplemde.codemirror.on('change', function () {
                $(document).trigger('contentpreview:render');
            });

            @if(culture.IsRightToLeft())
            {
                <text>$('.editor-toolbar').attr('style', 'direction:rtl;text-align:right');
                $('.CodeMirror').attr('style', 'text-align:right');</text>
            }
        }
    });
</script>
